<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>this</title>
</head>

<body>
    <h1>this 指向问题</h1>
    <ol>
        <li>全局的 this 指向了 window 对象</li>
        <li>全局作用局或者普通函数的 this 指向了 window</li>
        <li>this 在不是箭头函数情况下，永远指向最后一个调用他的对象</li>
        <li>new 关键词改变的 this 指向</li>
        <li>apply, call, bind 可以改变 this 指向，不是箭头函数</li>
        <li>箭头函数中没有 this , 看外层释放有函数，有则是外层的 this, 没有就是 window</li>
        <li>匿名函数中的 this 永远指向 window 匿名函执行具有全局性</li>
    </ol>
    <script>
        console.log('全局下的 this', this);

        {
            console.log('作用域下的 this', this);

            function func() {
                console.log('普通函数下的 this', this);
            }

            (function () {
                console.log('匿名函数1下的 this', this);

                var fn = function () {
                    console.log('匿名函数2下的 this', this);
                }
                fn()
            })()
        }

        () => console.log('普通箭头函数下面的 this', this);

        function Parent () {
            this.info = {
                name: 'lee',
                age: 28
            }
        }
        Parent.prototype.getInfo = function () {
            console.log('new 下面的 this ', this);
        }
        Parent.prototype.print = function() {
            const print = () => console.log('new 里面使用箭头函数的 this', this);
            print()
        }
        Parent.prototype.an = function() {
            (function() {
                console.log('new 里面的匿名函数1 this', this);
            })()

            var fn = function() {
                console.log('new 里面的匿名函数2 this', this);
            }
            fn()
        }
        const child1 = new Parent()
        child1.getInfo()
        child1.print()
        child1.an()
    </script>
</body>

</html>